<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<!-- 
    vue 接入步骤
    1. 先下载 vue.js 下载地址： https://unpkg.com/vue@3/dist/vue.global.js
    2. 在 html 文件中导入 vue.js
    3. 创建一个 vue 实例
    4. 将 vue 实例和页面模板进行绑定，让其产生联系
 -->

<body>
    <div id="app">
        {{ count }}
        <button @click="count++"> 点击增加 count </button>
        <br>
        <input type="text" v-model="message">
        <div>
            {{ message }}
        </div>
    </div>
</body>
<script>
    const { createApp } = Vue
    // createApp ： 用来创建一个 vue 实例用的
    const app = createApp({
        // data : 必须是一个函数，而且要 return 一个对象，
        // 对象中的数据是该 app 中的数据
        // 为什么要是函数呢？其目的是为了让每个组件都能有自己独立的数据
        data () {
            return {
                count: 0,
                message: '你笑起来真好看'
            }
        },
    })
    app.mount('#app')
// mount： 将 vue 实例和 id 为 app 标签进行绑定
</script>

</html>